<template>
    <div class="hotNav">
        <!-- 滚动区域 -->
        <div class="hotNavContain" v-if="homenav.length>0">
            <div class="nav-contain-inner">
                <a class="inner-item" v-for="(nav,index) in homenav" :key="index">
                    <img :src="nav.iconurl" alt="">
                    <span>{{nav.icontitle}}</span>
                </a>
            </div>
        </div>
        <!-- 进度条 -->
        <div class="hotNav-bottom">
            <div class="bottom-inner" :style="innerBarStyle">         
            </div>

        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:"hotNav",
    data(){
        return{
            //屏幕宽度
            screenW:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            //滚动内容宽度
            scrollContentW:720,
            //滚动背景长度
            bgBarW:100,
            //滚动条长度
            barXwidth:0,
            //起点
            startX:0,
            //记录结束点
            endFlag:0,
            //移动距离
            barMoveWidth:0

        }
    },

    mounted(){
        this.getBottomBarWidth();
        this.bindEvent();    
    },

    computed:{
        ...(mapState(['homenav'])),

        innerBarStyle(){
            return{
                width:`${this.barXwidth}px`,
                left:`${this.barMoveWidth}px`
            }
        }
    },

    methods: {
        //获取滚动条长度
        getBottomBarWidth(){
            this.barXwidth = this.bgBarW * (this.screenW/this.scrollContentW)
        },

        //移动端时间监听
        bindEvent(){
            this.$el.addEventListener('touchstart',this.handleTouchStart,false);
            this.$el.addEventListener('touchmove',this.handleTouchMove,false);
            this.$el.addEventListener('touchend',this.handleTouchEnd,false);
        },

        //开始触摸
        handleTouchStart(event){
            //第一个触点
            let touch = event.touches[0];
            //求出起始点
            this.startX = touch.pageX;
        },

        //开始移动
        handleTouchMove(event){
            //第一个触点
            let touch = event.touches[0];
            //求出移动距离
            let moveWidth = touch.pageX - this.startX;
            //求出滚动条移动距离
            this.barMoveWidth = -(this.bgBarW / this.scrollContentW * moveWidth - this.barMoveWidth);
            //边界值处理
            if(this.barMoveWidth <= 0){         //左边
                this.barMoveWidth = 0;
            }else if (this.barMoveWidth>(this.bgBarW - this.barXwidth)) {
                this.barMoveWidth = this.bgBarW - this.barXwidth;
            }
        },

        //结束触摸
        handleTouchEnd(){
            this.endFlag = this.barMoveWidth
        }
    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .hotNav{
      width 100%
      height 180px
      position relative
      background #ffffff
      padding-bottom 10px

  }

 .hotNav .hotNavContain{
     width 100%
     overflow-x scroll
  }

 .hotNav .hotNavContain::-webkit-scrollbar{
     display none
 }

.hotNav .hotNavContain .nav-contain-inner{
    width 720px
    height 180px
    display flex
    flex-wrap wrap 
}

.nav-contain-inner .inner-item{
    width 90px
    height 90px
    display flex
    flex-direction column
    justify-content center
    align-items center
}

.nav-contain-inner .inner-item img{
    width 40%
    font-size 14px
    margin-bottom 5px
    color #666

}

.hotNav-bottom{
    width 100px
    height 2px
    background #ccc
    position absolute
    left 50%;
    margin-left -50px
    bottom 8px
}

.hotNav-bottom .bottom-inner{
    position absolute
    left 0
    height 100%
    background orange 
    width 0
}
</style>